<template>
	<jf-navigation>
		{{ $t('index.add.navigation') }}
		<template #right>
			<view class="add_topic_btn" @click="submit()">{{$t('index.add.issue')}}</view>
		</template>
	</jf-navigation>



	<input type="text" :placeholder="$t('index.add.titlePlaceholder')" v-model="form.title" class="add_title"
		:disabled="data.loading" />
	<textarea v-model="form.content" :placeholder="$t('index.add.contentPlaceholder')" auto-height class="add_content"
		:disabled="data.loading" :maxlength="-1"></textarea>
	<view class="add_upload" :style="{ height: form.type === 2 ? '400rpx' : '' }">
		<zq-upload-ts :action="data.uploadUrl" v-model:files="data.files" :header="data.header" :uploaded="uploadImg"
			:fileType="['image']" :count="9" :addImageText="$t('index.add.imagePlaceholder')" :removeModel="false"
			:disabled="data.loading" :columnCount="4" v-if="form.type === 1">
		</zq-upload-ts>
		<zq-upload-ts :action="data.uploadUrl" :videoAction="data.uploadVideoUrl"  v-model:files="data.files" :header="data.header" :uploaded="uploadImg"
			:fileType="['video']" :count="1" :addImageText="$t('index.add.videoPlaceholder')" :removeModel="false"
			:disabled="data.loading" v-if="form.type === 2">
		</zq-upload-ts>
		
		<zq-upload-ts :imageAction="data.uploadUrl" :videoAction="data.uploadVideoUrl"  v-model:files="data.files" :header="data.header" :uploaded="uploadImg"
			:fileType="['video','image']" :count="9" :addImageText="$t('index.add.videoPlaceholder')" :removeModel="false"
			:disabled="data.loading" :isProfile="true" :columnCount="4"  v-if="form.type === 3">
		</zq-upload-ts>
		
		
	</view>
	<view class="add_picker" @click="openClassify()">
		<view class="add_picker_label">{{ $t('index.add.classifyLabel') }}</view>
		<view class="add_picker_content">
			<view :class="{ placeholder: !form.cid }">{{form.cid ? data.cname : $t('index.add.classifyPlaceholder')}}
			</view>
			<image src="@/static/images/index/icon014.png"></image>
		</view>
	</view>
	<!-- <view class="add_block"></view> -->

	<jf-topic :placeholder="$t('index.add.topicPlaceholder')" v-model="data.topics" :confirmText="$t('index.add.next')" @search="searchTopic"></jf-topic>
	<view class="add_topic_item" v-for="(item, index) in data.topicList" :key="index" @click="pushTopic(item)">
		<view>#{{ item.label }}</view>
		<view>{{ item.num }}次使用</view>
	</view>

	<jf-picker v-model:show="data.showClassify" v-model="form.cid" v-model:label="data.cname" :range="data.classifyList"
		:title="$t('index.add.classifyTitle')"></jf-picker>
</template>

<script lang="ts" setup>
	import { reactive, getCurrentInstance, onMounted, nextTick } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	import Route from '@/static/utils/Route'
	import { save, getTopicList } from '@/api/article'
	import { useStore } from '@/store/main'
	import enviroment from '@/static/network/enviroment'
	import VideoUtil from '@/static/utils/VideoUtil'

	const store = useStore()
	const route = new Route()
	const { proxy } = getCurrentInstance()
	const data = reactive({
		showTopic: false,
		showClassify: false,
		isAddTopic: false,
		topic: '',
		topics: [],
		topicList: [],
		files: [],
		uploadUrl: enviroment.getUploadImageUrl(),
		uploadVideoUrl:enviroment.getUploadVideoUrl(),
		header: enviroment.getGetHeader(),
		cname: undefined,
		classifyList: store.getClassifyList,
		loading: false,
		isProfile:false
	})
	const queryParamsTopic = reactive({
		page: 1,
		limit: 10,
		topic: '',
	})
	const form = reactive({
		cid: undefined,
		title: undefined,
		cover_image: undefined,
		image_input: undefined,
		video_path: undefined,
		intro: undefined,
		content: undefined,
		addr: undefined,
		topic: undefined,
		width: 0,
		height: 0,
		type: 2,
		from:uni.getLocale(),
	})

	const pushTopic = (item : any) : void => {
		if (data.topics.length > 0 && data.topics[data.topics.length - 1] === '') {
			data.topics[data.topics.length - 1] = item.label
		} else {
			data.topics.push(item.label)
		}
	}
	const next = () : void => {
		const topics = data.topics.filter((item) => item.length > 0)
		if (topics.length === 0) {
			uni.showToast({
				title: proxy.$t('index.add.topicNone'),
				icon: 'none',
			})
		}
	}
	const uploadImg = (file : any, respones : any) : void => {
		if (respones.status === 200) {
			file.status = 'success'
		} else {
			file.status = 'fail'
		}
		file.url = respones.data.url
		return file
	}
	const openClassify = () : void => {
		if (data.loading) return
		data.showClassify = true
	}
	const submit = () : void => {
		if (data.loading) return
		if (!form.cid) {
			uni.showToast({
				title: proxy.$t('index.add.classifyPlaceholder'),
				icon: 'none',
			})
		} else if (!form.title) {
			uni.showToast({
				title: proxy.$t('index.add.titlePlaceholder'),
				icon: 'none',
			})
		} else if (!form.content) {
			uni.showToast({
				title: proxy.$t('index.add.contentNone'),
				icon: 'none',
			})
		} else if (form.type === 2 && data.files.length === 0) {
			uni.showToast({
				title: proxy.$t('index.add.videoNone'),
				icon: 'none',
			})
		} else {
			data.loading = true
			form.topic = data.topics.join('|')
			if (form.type === 1) {
				form.image_input = data.files.map((item) => item.url).join(',')
			} else {
				form.video_path = data.files.map((item) => item.url).join(',')
			}
			if (data.files.length > 0 && form.type === 1) {
				form.cover_image = data.files[0].url
				form.width = data.files[0].width
				form.height = (data.files[0].height * 330) / data.files[0].width
				form.height = form.height > 660 ? 660 : form.height
			} else if (data.files.length > 0 && form.type === 2) {
				form.width = data.files[0].width
				form.height = (data.files[0].height * 330) / data.files[0].width
				form.height = form.height > 660 ? 660 : form.height
			}
			saveSubmit()
		}
	}
	const saveSubmit = () : void => {
		save(form)
			.then(() => {
				route.back({
					delay: 1000,
					message: proxy.$t('index.add.success'),
				})
			})
			.catch(() => {
				data.loading = false
				uni.showToast({
					title: proxy.$t('index.add.fail'),
					icon: 'none',
				})
			})
	}
	const searchTopic = (topic : string) : void => {
		queryParamsTopic.topic = topic
		getTopic()
	}
	const getTopic = () : void => {
		getTopicList(queryParamsTopic).then((res : any) => {
			data.topicList = res.data.list.map((item) => {
				return {
					label: item.topic,
					num: item.num,
				}
			})
		})
	}

	onLoad((options : any) => {
		form.type = Number(options.type)
		console.log("form.type",data)
	})
	onMounted(() => {
		nextTick(() => {
			getTopic()
			uni.request({
				url: 'http://ip-api.com/json/',
				method: 'POST',
				success: (res : any) : void => {
					form.addr = res.data.city
				},
			})
		})
	})
</script>

<style lang="scss">
	.add_topic_btn {
		line-height: 64rpx;
		padding: 0 26rpx;
		border-radius: 32rpx;
		background: var(--background);
		font-weight: 500;
		color: #ffffff;
		font-size: 28rpx;
	}

	.add_topic_input {
		width: 100vw;
		height: 264rpx;
		padding: 32rpx;
		box-sizing: border-box;
		font-weight: 400;
		color: #2c5998;
		line-height: 32rpx;
		font-size: 28rpx;
	}

	.add_topic_item {
		@include layout(row, center, space-between);
		width: 686rpx;
		height: 80rpx;
		margin-left: 32rpx;
		border-bottom: 2rpx solid #edeff3;
		font-weight: 400;
		line-height: 32rpx;
		font-size: 26rpx;

		view {
			&:nth-child(2) {
				font-weight: 400;
				color: #b2b9c6;
				line-height: 33rpx;
				font-size: 24rpx;
			}
		}
	}

	.add_title {
		width: 686rpx;
		margin-left: 32rpx;
		height: 84rpx;
		font-weight: 400;
		line-height: 32rpx;
		font-size: 32rpx;
		border-bottom: 2rpx solid #e7eaee;
	}

	.add_content {
		width: 686rpx;
		padding: 32rpx;
		min-height: 200rpx;
		font-weight: 400;
		line-height: 32rpx;
		font-size: 28rpx;
	}

	.add_upload {
		width: 686rpx;
		margin-left: 32rpx;
	}

	.add_picker {
		@include layout(row, center, space-between);
		width: 686rpx;
		margin-left: 32rpx;
		height: 84rpx;
		border-bottom: 2rpx solid #e7eaee;
		margin-top: 24rpx;

		.add_picker_label {
			font-weight: 400;
			line-height: 40rpx;
			font-size: 28rpx;
		}

		.add_picker_content {
			@include layout();
			font-weight: 400;
			color: #2e65ff;
			line-height: 40rpx;
			font-size: 28rpx;

			.placeholder {
				color: #b2b9c6;
			}

			image {
				width: 32rpx;
				height: 32rpx;
			}
		}
	}

	.add_block {
		width: 100%;
		height: 100rpx;
	}
</style>